import React from 'react';
import { Modal, Form, Spin, Input, Select, DatePicker, TreeSelect } from 'antd';
import moment from 'moment'

import defaultSettings from '../../../../config/defaultSettings'
const { SHOW_PARENT } = TreeSelect;
const { Option } = Select;

@Form.create()
class AddModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dateTime: '',
      selectedRowKeys: [],
      currOrgName: '',
      currSystemId: ''
    };
  }

  componentDidMount(){
    const { systemNameList } =this.props;
    this.setState({
      currOrgName: this.props.userDetail.orgId?this.props.userDetail.orgId:'',
      currSystemId: (defaultSettings.systemId&&defaultSettings.systemId!='')?defaultSettings.systemId: (systemNameList? systemNameList[0].systemId : ''),
    })
  }

  handleOk = e => {
    const { onOk, form } = this.props;
    const { validateFields, getFieldsValue } = form;
    let _this = this;
    validateFields(errors => {
      if (errors) {
        return;
      }
      const data = { ...getFieldsValue() };
      data.staffExpDt = _this.state.dateTime;
      data.staffId = _this.props.userDetail&&_this.props.userDetail.staffId?_this.props.userDetail.staffId:'';
      data.orgId = this.state.currOrgName;
      console.log(data,'---------------------')
      // onOk(data);
    });
  };

  handleCancel = e => {
    const { onCancel } = this.props;
    onCancel();
  };

  timeSelect = (value, dateString) => {
    this.setState({
      dateTime: dateString,
    });
  };

  orgNameChange = (value, label, extra) => {
    const { orgList } = this.props;
    let str = ''
    if(value.length>0){
      for(let i=0;i<orgList.length;i++){
        for(let j=0;j<value.length;j++){
          if(orgList[i].name==value[j]){
            if(str==''){
              str = ''+orgList[i].id
            }else{
              str = str+','+orgList[i].id
            }
          }
        }
      }
    }
    this.setState({
      currOrgName: str,
    });
  };

  //系统名称修改
  systemIdChange = value => {
    this.setState({
      currSystemId: value,
    },()=>{
      this.props.loadDept(value)
    });
  };


  render() {
    const { form, loading, userDetail, orgList, onLoad, systemNameList, pwdTypeList, ...addModalProps } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    let treeValue = []
    if(userDetail.orgName){
        if(userDetail.orgName.indexOf(',')==-1){
          treeValue = [userDetail.orgName]
        }else{
          if(userDetail.orgName==''){
            treeValue = []
          }else{
            const arr = userDetail.orgName.split(',')
            for(let i=0;i<arr.length;i++){
              treeValue.push(arr[i])
            }
          }
        }
    }
    
    
    // console.log(userDetail,'userDetail')
    return (
      <Modal {...addModalProps} onOk={this.handleOk} onCancel={this.handleCancel}>
        <Spin spinning={loading}>
          <Form style={{ paddingRight: '20px' }} name="loginName" {...formItemLayout}>
            <Form.Item label="用户账号" name="loginName">
              {getFieldDecorator('loginName', {
                initialValue: userDetail && userDetail.loginName ? userDetail.loginName : '',
                // initialValue: '',
                rules: [
                  {
                    required: true,
                    message: '请输入用户账号',
                  },
                ],
              })(<Input disabled={userDetail.staffId?true:false} placeholder="请输入用户账号" />)}
            </Form.Item>
            {!userDetail.staffId&&
              <Form.Item label="用户密码" name="password">
                {getFieldDecorator('password', {
                  initialValue: userDetail && userDetail.password ? userDetail.password : '',
                  // initialValue: '',
                  rules: [
                    {
                      required: true,
                      message: '请输入用户密码',
                    },
                  ],
                })(<Input.Password type="" placeholder="请输入用户密码" />)}
              </Form.Item>
            }
            {/* <Form.Item label="用户编码" name="staffCode">
              {getFieldDecorator('staffCode', {
                initialValue: userDetail && userDetail.staffCode ? userDetail.staffCode : '',
                // initialValue: '',
                rules: [
                  {
                    required: true,
                    message: '请输入用户编码',
                  },
                ],
              })(<Input placeholder="请输入用户编码" />)}
            </Form.Item> */}
            <Form.Item label="用户名称" name="staffName">
              {getFieldDecorator('staffName', {
                initialValue: userDetail && userDetail.staffName ? userDetail.staffName : '',
                // initialValue: '',
                rules: [
                  {
                    required: true,
                    message: '请输入用户名称',
                  },
                ],
              })(<Input placeholder="请输入用户名称" />)}
            </Form.Item>
            <Form.Item label="归属部门" name="orgId">
              {
                (!defaultSettings.systemId||defaultSettings.systemId=='')&&
                <Select
                  style={{ width: 200, marginRight: '10px' }}
                  placeholder="请选择系统名称"
                  onChange={this.systemIdChange}
                  value={this.state.currSystemId}
                  >
                  {
                      systemNameList.map(item=>{
                      return(<Option value={item.systemId.toString()}>{item.systemName}</Option>)
                      })
                  }
                </Select>
              }
              {getFieldDecorator('orgId', {
                initialValue: userDetail && userDetail.orgName ? treeValue : [],
                // initialValue: '',
                rules: [
                  {
                    required: true,
                    message: '请选择归属部门',
                  },
                ],
              })(<TreeSelect
                allowClear
                treeDataSimpleMode
                style={{ width: 200 }}
                treeDefaultExpandAll
                multiple
                // showCheckedStrategy={SHOW_PARENT}
                // initValue={this.state.currOrgName}
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                placeholder="请选择归属部门"
                onChange={this.orgNameChange}
                loadData={onLoad}
                treeData={orgList}
              />)}
            </Form.Item>
            <Form.Item label="电话" name="telephone">
              {getFieldDecorator('telephone', {
                initialValue: userDetail && userDetail.telephone ? userDetail.telephone : '',
                // initialValue: '',
                rules: [
                  {
                    required: true,
                    message: '请输入正确的电话',
                    pattern: /^1[345678]\d{9}$/,
                  },
                ],
              })(<Input placeholder="请输入电话" />)}
            </Form.Item>
            <Form.Item label="用户状态" name="statusCd">
              {getFieldDecorator('statusCd', {
                initialValue: userDetail && userDetail.statusCd ? userDetail.statusCd.toString() : '1',
                rules: [
                  {
                    required: true,
                    message: '请选择用户状态',
                  },
                ],
              })(
                <Select placeholder="请选择状态">
                  <Option value="1">在用</Option>
                  <Option value="2">删除</Option>
                  <Option value="3">离职</Option>
                  <Option value="4">冻结</Option>
                </Select>,
              )}
            </Form.Item>
            {/* <Form.Item label="密码变更" name="pwChgType">
              {getFieldDecorator('pwChgType', {
                // initialValue: pwdTypeList&&pwdTypeList.length>0?pwdTypeList[0].pwChgTypeId:'',
                initialValue: userDetail && userDetail.pwChgType ? userDetail.pwChgType : '',
                // initialValue: '',
                rules: [
                  {
                    required: true,
                    message: '请选择密码变更周期',
                  },
                ],
              })(
                <Select placeholder="请选择密码变更周期">
                  {pwdTypeList.map(item => {
                    return <Option value={item.pwChgTypeId}>{item.name}</Option>;
                  })}
                </Select>,
              )}
            </Form.Item> */}
            <Form.Item label="账号到期" name="staffExpDt">
              {getFieldDecorator('staffExpDt', {
                initialValue: userDetail && userDetail.staffExpDt ? moment(userDetail.staffExpDt) : '',
                // initialValue: '',
                rules: [
                  {
                    required: true,
                    message: '请选择账号到期时间',
                  },
                ],
              })(
                <DatePicker showTime onChange={this.timeSelect} placeholde="请选择账号到期时间" />,
              )}
            </Form.Item>
            <Form.Item label="用户描述" name="remark">
              {getFieldDecorator('remark', {
                initialValue: userDetail && userDetail.remark ? userDetail.remark : '',
                // initialValue: '',
                rules: [
                  {
                    required: false,
                    message: '请输入用户描述',
                  },
                ],
              })(<Input placeholder="请输入用户描述" />)}
            </Form.Item>
          </Form>
        </Spin>
      </Modal>
    );
  }
}

export default AddModal;
